<template>  
  <view class="view-contain">  
    <!-- 公共组件-每个页面必须引入 -->  
    <public-module leftIcon="arrow-left" :title="title" /> 
	 
	<view class="user-integral">
	  <text class="grid-text">您的学习积分为：{{user.totalIntegral}}</text>
	</view>
	<view class="user-integral">
	  <text class="grid-text">首次登录、学习打卡、模考复盘增加积分</text>
	</view>
	<view class="user-integral">
	  <text class="grid-text">评论公考讲师消耗积分</text>
	</view>
	
	
    <mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">  
      <view  
        class="review-item u-flex-y"  
        v-for="(item, index) in markList"  
        :key="index"  
      >  

        
        <view style="margin-bottom: 16rpx; display: flex; justify-content: center; align-items: center;gap: 40px;">
          <view class="title">{{ item.integralChangeDescription }}</view> 
          <view class="title">{{ item.integralChangeAmount }}</view> 
          <view>{{ $u.timeFormat(item.integralChangeTime, 'yyyy-mm-dd') }}</view> 
        </view>  
      </view>  
    </mescroll-uni>  
  </view>  
</template>  
  
<script>  
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";  
import { userIntegralInfo } from "@/config/api.js";  
import {mapState,mapMutations} from 'vuex';
  
export default {  
  mixins: [MescrollMixin], // 使用mixin  
  data() {  
    return {  
      title: '积分记录',  
      height: 0,  
      markList: [], // 存储所有获取到的数据  
      downOption: {  
        use: false  
      },  
      upOption: {  
        textNoMore: '一不小心被你看完啦~',  
        toTop: {  
          right: '24rpx',  
          bottom: '60rpx'  
        }  
      }  
    };  
  }, 
   computed: {
   	...mapState(['user'])
   },
  onShow() {  
    const res = uni.getSystemInfoSync();  
    this.height = res.windowHeight - 100; // 100为组件高度  
    this.mescroll.resetUpScroll();  
    this.fetchData(); // 初始化时加载数据  
  },  
  methods: {    
    async  fetchData(page = { num: 1, size: 10 }) {  
      try {  
        const res = await userIntegralInfo(`?pageNum=${page.num}&pageSize=${page.size}`);  
        if (res && res.rows) {   
          // 后台接口有返回列表的总数据量  
          this.mescroll.endBySize(res.rows.length, res.total); // 必传参数(当前页的数据个数, 总数据量)  
          // 如果是第一页需手动清空列表  
          if (page.num === 1) {  
            this.markList = [];  
          }  
          this.markList = [...this.markList, ...res.rows]; // 追加原始数据到markList  
        }  
      } catch (error) {  
        // 联网失败, 结束加载  
        this.mescroll.endErr();  
      }  
    },  
    upCallback(page) {  
      this.fetchData(page); // 上拉加载时调用fetchData方法，传入当前页码和每页数量  
    }
  }  
};  
</script>  
  
<style lang="scss" scoped>  
.view-contain {  
  position: relative;  
  
  .review-item {  
    width: calc(100vw - 48rpx);  
    margin: 12rpx 24rpx 12rpx;  
    padding: 24rpx;  
    background-color: #FFF;  
    border-radius: 32rpx;  
      
    .title {  
      font-size: 30rpx;  
      font-weight: bold;  
      margin-left: 16rpx;  
      white-space: normal;  
      word-break: break-all;  
      overflow: hidden;  
    }  
      
    .sj {  
      font-size: 28rpx;  
      font-weight: normal;  
      color: #333;  
    }  
  
    .btn-detail {  
      border-radius: 12rpx;  
      font-size: 28rpx;  
      padding: 0 12rpx;  
      color: #409EFF;  
      border: 1rpx solid #409EFF;  
    }  
  }  
  
  .flex-shrink-0 {  
    flex-shrink: 0;  
  } 
   .user-integral {
     display: flex; /* 启用Flexbox布局 */
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
     margin-top: 20px; /* 上间距 */
     margin-bottom: 20px; /* 下间距 */
     text-align: center; /* 文本居中 */
   }
  .grid-text {
    font-size: 18px; /* 文字加大 */
    font-weight: bold; /* 文字加粗 */
  }
}  
</style>